import type {IColumnsOption} from 'vc';
import {
  BUSINESS_DATA,
  CITY,
  INDEX, INDUSTRY_CATEGORY, PROVINCE, REGISTERED_CAPITAL, COUNTRY,
} from '@/utils/tableColumn';
import {toF9} from '@/utils';
import {numToUnitNum} from "@vc/utils";

export function useTable(esgData, source) {
// 溯源弹窗
  const showActionsheet = ref(false);
  // 溯源弹窗数据
  const actionSheetData = ref<Record<string, any>>();
  const columns = ref<IColumnsOption[]>([]);
  watch(
    () => esgData.value?.indicators,
    (nv, ov) => {
      if (JSON.stringify(nv) !== JSON.stringify(ov)) {
        columns.value = [
          {...INDEX},
          {
            field: 'securitiesName',
            title: '公司名称',
            align: 'center',
            width: 300,
            slots: {
              default: ({row}) => {
                if (row.companyId) {
                  return <a class="companyName"
                            onClick={() => toF9(row.companyId)}>{row.securitiesName}</a>;
                } else {
                  return <span>{row.securitiesName}</span>;
                }
              }
            }
          },
        ];
        nv.forEach((item, index) => {
          columns.value.push({
            field: `indicator${index}`,
            title: item.name,
            align: 'center',
            width: 260,
            sortable: true,
            sortBy: item.code,
            slots: {
              default: ({row}) => {
                const _value = row[`indicator${index}`]?.indicatorDisplayValue;
                const showJump = row[`indicator${index}`]?.fileUrl && (_value || _value === 0) && source.value;
                const remark =
                  _value &&
                  (row[`indicator${index}`]?.calcIndicatorRemark || row[`indicator${index}`]?.contentDescription);
                return (
                  <div>
                    <span onClick={() => goSource(row[`indicator${index}`], remark)}
                          style={showJump && row[`indicator${index}`].indicatorDisplayValue ? 'color: #1482f0;\n' +
                            'text-decoration: underline;\n' +
                            'cursor: pointer;\n' +
                            'text-underline-position: under;' : ''}
                          class={remark ? 'remark' : ''}>{row[`indicator${index}`] ? numToUnitNum(row[`indicator${index}`].indicatorDisplayValue) : '-'}</span>

                  </div>
                );
              },
              header: ({column, columnIndex}) => {
                return (
                  <span> {nv[columnIndex - 2].unit ?
                    (<span>{column.title}<span
                      style='color:#666;font-weight:normal;'>({nv[columnIndex - 2].unit})</span></span>) :
                    (<span>{column.title}</span>)}
                  </span>
                )
              }
            }
          })
        })
        columns.value.push(
          {...PROVINCE},
          {...CITY},
          {...COUNTRY},
          {...INDUSTRY_CATEGORY},
          {...BUSINESS_DATA},
          {...REGISTERED_CAPITAL})
      }
    })


  function goSource(item, remark) {
    if (remark || (item.indicatorDisplayValue && source.value && item.fileUrl)) {
      item.year = item.statisticalPeriod;
      item.value = item.indicatorDisplayValue;
      actionSheetData.value = item;
      showActionsheet.value = true;
    }

  }

  return {
    columns,
    actionSheetData,
    showActionsheet
  };
}
